<template>
	<view class="bgContent">
		<u-navbar title="消息列表" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" />
		<view class="contentBox p-20 border-box">
			<scroll-view scroll-y="true">
				<view>
					<view class="m-b-20 bg-white p-l-20 p-r-20 b-r-10" v-for="item in msgList" :key="item.id" @tap="handleToDetail(item)">
						<view class="date-box flex justify-between">
							<view class="flex">
								<view class="messageIcon">
									<u-icon name="volume" color="#ffffff" size="22"></u-icon>
								</view>
								<view class="m-l-5 font-13 line-h-60 color-b">{{ type == 1 ? '系统消息':'店铺消息'}}</view>
							</view>
							<text class="font-13 line-h-60">{{ item.createTime | formatDate }}</text>
						</view>
						<view class="content-box bg-white">
							<view class="p-b-20">
								<text class="font-16 f-31">{{ item.title }}</text>
							</view>
							<view class="p-b-20">
								<text class="font-13 f-a7 p-b-30">{{ item.content }}</text>
							</view>
							<view class="footer flex align-center justify-between">
								<text class="font-13 f-91">查看详情</text>
								<view class="flex">
									<view class="red-box" v-if="!item.state"></view>
									<u-icon name="arrow-right" size="20" color="#cccccc"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<empty :show="msgList.length == 0" />
					<view class="null-txt c-secondary color-g">都被你看光啦~</view>
				</view>
			</scroll-view>
			<popupCom :show="show" :messageData="messageData" @close="show=false"></popupCom>
		</view>
	</view>
</template>

<script>
	import { getMsgUpdate, haveReadMsg } from '@/common/api/message.js'
	import popupCom from '@/components/popupCom/popupCom.vue'
	// import uniWebviewJs from '@dcloudio/uni-webview-js';
	export default {
		components:{
			popupCom
		},
		data() {
			return {
				msgList: [],
				showLoad: false,
				pageNum: 1,
				isGet: true,
				type: '',
				show: false,
				messageData:{},//点击的消息
			};
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				return year + "-" + month + "-" + day;
			}
		},
		onLoad(opt) {
			this.type = opt.type
			this.msgList = []
			this.showLoad = false
			this.isGet = true
			this.getData()
		},
		onReachBottom() {
			this.pageNum++
			this.getData()
		},
		methods: {
			// 加载更多
			getData() {
				if (this.isGet && !this.showLoad) {
					this.showLoad = true
					let parmas = {
						pageNo: this.pageNum,
						pageSize: 10,
						targetId: null,
						roleType: null
					};
					if( this.type == 1 ){
						parmas.roleType = 1
						parmas.targetId = 0
					}else if(this.type == 2){
						parmas.roleType = 3
						parmas.targetId = 1
					}
					getMsgUpdate(parmas).then(res => {
						this.showLoad = false
						if (res.code == 200) {
							if(this.pageNum === 1){
								this.msgList = res.data
							}else{
								this.msgList = this.msgList.concat(res.data)
							}
							if (this.msgList.length == res.extend.total) {
								this.isGet = false
							}
						}
					})
				}
			},
			handleToDetail(data) {
				// 已读
				haveReadMsg(data.id).then(res => {
					if(res.code === 200){
						this.msgList.some(item => {
							if (item.id === data.id) {
								item.state = 1
								return true
							}
						})
					}
				})
				//系统公告和app更新日志弹弹窗 
				if (this.type == 1) {
					this.messageData = JSON.parse(JSON.stringify(data))
					this.show = true
				} else {
					//跳转页面
					uni.navigateTo({
						url: `/pages/order/orderDetails?orderId=${data.orderId}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgContent{
			background-color: #F3F3F3 !important;
			min-height: 100vh;
	}
	.messageIcon{
		border-radius: 50%;
		height: 60rpx;
		width: 60rpx;
		line-height: 60rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(42deg,#FF0804 0%,#FC7844 100%);
	}
	.contentBox{
		width: calc(100% - 40rpx);
		margin: 0 auto;
	}
	.null-txt {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.date-box {
		//height: 106rpx;
		padding: 20rpx;
		color: #A7AAB3;
	}

	.content-box {
		border-radius: 10rpx;
		padding: 0 20rpx;

		.f-31 {
			color: #313133;
		}

		.f-a7 {
			color: #A7AAB3;
		}

		.f-91 {
			color: #919298;
		}

		.footer {
			box-shadow: 0px -1px 0px 0px #EDEDED;
			height: 90rpx;

			.red-box {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: #e60000;
				margin-right: 10rpx;
			}
		}
	}
</style>